//导入node.js自带的核心模块-path处理路径模块, node.js自带的核心模块不需要额外安装
var path = require('path');

//导入Mini-css-extract-plugin插件
var MiniCssExtractPlugin = require("mini-css-extract-plugin");

//导入html-webpack-plugin插件
var HtmlWebpackPlugin = require('html-webpack-plugin');





// __dirname: node.js的全局变量，表示当前文件的绝对路径
console.log('__dirname ==> ', __dirname);
console.log(path.resolve(__dirname, 'public'));






// wedpack所有配置都需要在这里写
module.exports = {


  //打包模式
  mode: 'development',
  // [development]: [开发环境模式], 打包输出的js文件没有压缩的;
  // [production]: [生产环境模式], 打包输出的js文件是压缩的;
  // [none]: 尽量保持原本代码格式



  // ===================================================================================
  //配置入口文件(打包入口)(三种情况写法)
  // entry: './app/app.js'

  //将多个入口js文件[合并到一个js文件输出]
  // entry: ['./app/app.js', './app/index.js'],

  //修改输出js文件名并且{分别输出, 不会合并到一个js文件}
  entry: {
    app3: './app/app.js',
    // app2: './app/index.js'
  },



  // ===================================================================================
  //配置出口(打包输出目录)
  output: {
    //输出目录
    path: path.resolve(__dirname, 'public'),

    //[指定输出文件名],(不允许入口配置使用对象配置多个入口文件)
    //[name]指向于入口配置的对象的键名
    //[hash]唯一标识, 一串字符串
    filename: 'myapp.js'
    // filename: new Date().getTime() + '[name].js'
    // filename: '[name].[hash].js'
  },




  // ===================================================================================
  // 配置loader
  module: {
    // loader所有解析规则
    rules: [
      // [ css-loader ]
      {
        // 匹配文件后缀
        test: /\.css$/i,


        //css-loader解析css文件
        use: ['style-loader', 'css-loader']


        // css-loader解析css文件, 并且分离css
        // use: [MiniCssExtractPlugin.loader, 'css-loader']
        // use: [
        // { loader: miniCssExtractPlugin.loader },
        // { loader: 'css-loader' }
        // ]
        // (两种use格式写法  []与[{}])
      },

      // [ less-loader ]
      {
        // 匹配文件后缀
        test: /\.less$/i,
        use: [
          // 'style-loader',

          MiniCssExtractPlugin.loader,// 替代style-loader, 并且将输出的css分离
          'css-loader',
          // 将 less 编译成 CSS
          'less-loader',],
      },

      // [ sass-loader ]
      {
        // 匹配文件后缀
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },

      // [ url-loader ]
      {
        // 匹配文件后缀
        test: /\.(png|jpe?g|gif|webp)$/i,

        use: [
          {
            loader: 'url-loader',

            options: {
              // 直接输出一个字符串(base64或者图片路径), 而不是输出一个对象
              esModule: false,


              // limit 限制base64大小, 
              // 如果图片大小 大于 limit => 输出 图片路径
              // 如果图片大小 小于等于 limit => 输出 base64
              limit: 1024 * 10,
            }
          }
        ],

        // 模块类型, 在webpack5中兼容后, 可以正常处理css的背景图
        type: 'javascript/auto'
      },

      // [ html-withimg-loader ]
      { // ((html-withimg-loader处理html文件的图片))
        // 匹配文件后缀
        test: /\.html?$/i,

        use: [
          {
            loader: 'html-withimg-loader'
          }
        ]
      }
    ]
  },




  // ===================================================================================
  plugins: [
    // 配置MiniCssExtractPlugin插件(分离css插件)
    new MiniCssExtractPlugin(
      // 指定输出css文件的名称
      { filename: 'app.css' }
    ),

    // 配置HtmlWebpackPlugin插件
    new HtmlWebpackPlugin({
      // 模板路径(要打包的html)
      template: "./app.html",


      inject: "body",
      //[ true, false, body, head ]
      //true: 将打包的js添加到head的结束标签前面
      //false: 不会使用打包的js、css
      //body: 将js放到body结束标签之前
      //head: 将打包的js添加到head的结束标签前面


      //压缩
      minify: {
        //移除注释
        removeComments: true,
        //移除(合并)空白符
        collapseWhitespace: true,
        //移除标签属性的引号
        removeAttributeQuotes: true
      },

      //指定文件名输出
      filename: 'app.min.html'
    })
  ],
}



